<template>
    <view class="financial-calendar-page">
      <!-- 使用 z-paging 实现滚动和分页 -->
      <z-paging 
        ref="paging" 
        v-model="dataList" 
        :fixed="true" 
        safe-area-inset-bottom 
        :default-page-size="10"
        :auto-show-back-to-top="true" 
        :refresher-enabled="true" 
        :loading-more-enabled="true" 
        @query="queryList"
      >
        <!-- 顶部固定区域 -->
        <template #top>
          <view class="top-container">
  
            <!-- Tab切换 -->
            <view class="tab-container">
              <view class="tab-wrapper">
                <view
                  class="tab-item"
                  :class="{ active: activeTab === 'calendar' }"
                  @click="switchTab('calendar')"
                >
                  <text class="tab-text">经济数据</text>
                </view>
                <view
                  class="tab-item"
                  :class="{ active: activeTab === 'events' }"
                  @click="switchTab('events')"
                >
                  <text class="tab-text">财经事件</text>
                </view>
                <view
                  class="tab-item"
                  :class="{ active: activeTab === 'central' }"
                  @click="switchTab('central')"
                >
                  <text class="tab-text">央行动态</text>
                </view>
                <!-- 滑动下划线 -->
                <view class="tab-indicator" :style="{ transform: `translateX(${tabIndicatorLeft}px)` }"></view>
              </view>
            </view>
  
            <!-- 日历选择区域 -->
            <view class="calendar-header">
              <!-- 第一行：日期输入框 + 只看重要复选框 -->
              <view class="calendar-top-row">
                <view class="date-input-wrapper" @click="openCalendar">
                  <text class="date-input">{{ selectedDate }}</text>
                  <uv-icon name="calendar" size="20" color="#303133"></uv-icon>
                </view>
                <view class="important-filter" @click="toggleImportantFilter">
                  <view class="checkbox-wrapper">
                    <view class="custom-checkbox" :class="{ checked: onlyImportant }">
                      <uv-icon v-if="onlyImportant" name="checkmark" size="14" color="#fff"></uv-icon>
                    </view>
                  </view>
                  <text class="filter-text">只看重要</text>
                </view>
              </view>
  
              <!-- 第二行：周视图 -->
              <view class="calendar-dates-container">
                <view class="dates-content">
                  <scroll-view
                    class="calendar-scroll"
                    scroll-x
                    :scroll-into-view="scrollIntoDayId"
                    :scroll-with-animation="true"
                    show-scrollbar="false"
                  >
                    <view class="calendar-content">
                      <view
                        v-for="(d, idx) in visibleDays"
                        :key="d.date"
                        :id="`day-${idx}`"
                        class="day-item"
                        :class="{ active: d.date === selectedDate }"
                        @click="selectDate(d)"
                      >
                        <text class="week-text">{{ d.weekText }}</text>
                        <text class="day-text">{{ d.day }}</text>
                      </view>
                    </view>
                  </scroll-view>
                </view>
              </view>
            </view>
  
            <!-- uv-calendars 日历选择器 -->
            <uv-calendars
              ref="calendar"
              :insert="false"
              :lunar="false"
              :range="false"
              :clearDate="false"
              :startDate="minDate"
              :endDate="maxDate"
              :color="'#00d4aa'"
              :round="20"
              :closeOnClickOverlay="true"
              @confirm="onCalendarConfirm"
              @change="onCalendarChange"
            ></uv-calendars>
          </view>
        </template>
  
        <!-- 加载动画 -->
        <view v-if="isCalendarLoading && dataList.length === 0" class="calendar-loading">
          <uv-loading-icon mode="circle" color="#00d4aa" size="40"></uv-loading-icon>
          <text class="loading-text">加载中...</text>
        </view>
  
        <!-- 空状态提示 -->
        <view v-else-if="dataList.length === 0" class="empty-state">
          <text class="empty-text">暂无数据</text>
        </view>
  
        <!-- 列表内容 -->
        <view v-else class="calendar-list">
          <!-- Tab1: 财经日历 -->
          <template v-if="activeTab === 'calendar'">
            <view 
              class="up-item" 
              v-for="(it, idx) in dataList" 
              :key="it.id || idx"
              v-show="!onlyImportant || it.importance === 3"
            >
              <!-- 第一行：时间 + 数据回顾 + 星级 -->
              <view class="up-header">
                <view class="up-left">
                    <image class="flag" v-if="it.flag" :src="it.flag" mode="aspectFit"></image>
                  <text class="time">{{ it.time }}</text>
                  <!-- <image class="icon" src="/static/images/data/data.png" mode="aspectFit" />
                  <text class="gray">数据回顾</text> -->
                </view>
                <view class="up-right">
                  <view class="stars">
                    <text v-for="s in 5" :key="s" class="star" :class="{ filled: s <= (it.importance || 3) }">★</text>
                  </view>
                </view>
              </view>
              
              <!-- 第二行：事件标题 + 状态 -->
              <view class="up-content">
                <view class="event-title" :class="{ 'event-published': it.status === '已公布' }">
                  {{ it.title }}
                </view>
                <view class="status-badge" v-if="it.status" :class="{ 'status-published': it.status === '已公布' }">
                  {{ it.status || '未公布' }}
                </view>
              </view>
              
              <!-- 第三行：前值 + 预期 + 公布 -->
              <view class="up-meta">
                <view class="meta-item">
                  <text class="meta-label">前值</text>
                  <text class="meta-value">{{ it.prev || '--' }}</text>
                </view>
                <view class="meta-item">
                  <text class="meta-label">预期</text>
                  <text class="meta-value">{{ it.exp || '--' }}</text>
                </view>
                <view class="meta-item">
                  <text class="meta-label">公布</text>
                  <text class="meta-value" :class="{ 'has-value': it.actual && it.actual !== '--' }">
                    {{ it.actual || '--' }}
                  </text>
                </view>
              </view>
            </view>
          </template>
  
          <!-- Tab2: 财经事件 -->
          <template v-else-if="activeTab === 'events'">
            <view 
              class="up-item" 
              v-for="(it, idx) in dataList" 
              :key="it.id || idx"
              v-show="!onlyImportant || it.importance === 3"
            >
              <!-- 第一行：时间 + 事件提醒 + 星级 -->
              <view class="up-header">
                <view class="up-left">
                    <image class="flag" v-if="it.flag" :src="it.flag" mode="aspectFit"></image>
                  <text class="time">{{ it.time }}</text>
                  <!-- <image class="icon" src="/static/images/data/notice.png" mode="aspectFit" />
                  <text class="gray">事件提醒</text> -->
                </view>
                <view class="up-right">
                  <view class="stars">
                    <text v-for="s in 5" :key="s" class="star" :class="{ filled: s <= (it.importance || 3) }">★</text>
                  </view>
                </view>
              </view>
              
              <!-- 第二行：事件标题 -->
              <view class="up-content">
                <view class="event-title">
                  {{ it.title }}
                </view>
              </view>
            </view>
          </template>
  
          <!-- Tab3: 央行动态 -->
          <template v-else-if="activeTab === 'central'">
            <view 
              class="up-item" 
              v-for="(it, idx) in dataList" 
              :key="it.id || idx"
              v-show="!onlyImportant || it.importance === 3"
            >
              <!-- 第一行：时间 + 事件提醒 + 星级 -->
              <view class="up-header">
                <view class="up-left">
                    <image class="flag" v-if="it.flag" :src="it.flag" mode="aspectFit"></image>
                  <text class="time">{{ it.time }}</text>
                  <!-- <image class="icon" src="/static/images/data/notice.png" mode="aspectFit" />
                  <text class="gray">事件提醒</text> -->
                </view>
                <view class="up-right">
                  <view class="stars">
                    <text v-for="s in 5" :key="s" class="star" :class="{ filled: s <= (it.importance || 3) }">★</text>
                  </view>
                </view>
              </view>
              
              <!-- 第二行：事件标题 -->
              <view class="up-content">
                <view class="event-title">
                  {{ it.title }}
                </view>
              </view>
            </view>
          </template>
        </view>
      </z-paging>
    </view>
  </template>
  
  <script>
  import { getEconomicData, getFinancialEvents, getCentralBankActivities } from '@/api/data'
  
  export default {
    name: 'FinancialCalendar',
    data() {
      const sys = uni.getSystemInfoSync()
      const statusBarPx = sys.statusBarHeight || 0
      
      // 初始化日期数据
      const today = new Date()
      const year = today.getFullYear()
      const month = String(today.getMonth() + 1).padStart(2, '0')
      const day = String(today.getDate()).padStart(2, '0')
      const selectedDate = `${year}-${month}-${day}`
      
      return {
        statusBarPx,
        dataList: [], // z-paging 数据列表

        // Tab相关
        activeTab: 'calendar', // 当前激活的tab: 'calendar' | 'events' | 'central'
        tabIndicatorLeft: 0, // Tab下划线的位置

        // 日历相关
        selectedDate: selectedDate, // 当前选中的日期 YYYY-MM-DD
        visibleDays: [], // 可见的日期列表
        scrollIntoDayId: '', // 滚动到的日期ID
        minDate: '2020-01-01', // 最小可选日期
        maxDate: '2030-12-31', // 最大可选日期

        // 财经日历数据缓存
        allCalendarData: [], // 缓存当前日期的所有财经日历数据
        currentLoadedDate: '', // 当前已加载数据的日期
        currentLoadedTab: '', // 当前已加载数据的tab
        isCalendarFirstLoad: true, // 是否首次加载财经日历数据
        isCalendarLoading: false, // 财经日历是否正在加载

        // 只看重要筛选
        onlyImportant: false, // 是否只看重要（importance_level = 3）
      }
    },
    
    onShow() {
      console.log('财经日历页面加载，初始 selectedDate:', this.selectedDate)
      this.initDates()

      // 确保视图更新后滚动到当前日期
      this.$nextTick(() => {
        setTimeout(() => {
          this.scrollToSelectedDate()
        }, 300)
      })

      // 初始化Tab下划线位置
      this.$nextTick(() => {
        this.updateTabIndicator()
      })
    },
    
    methods: {
      /**
       * 返回上一页
       */
      goBack() {
        uni.navigateBack()
      },
  
      /**
       * 切换Tab
       */
      switchTab(tab) {
        if (this.activeTab === tab) return

        this.activeTab = tab

        // 更新Tab下划线位置
        this.$nextTick(() => {
          this.updateTabIndicator()
        })

        // 重置日期为今天
        const today = new Date()
        const year = today.getFullYear()
        const month = String(today.getMonth() + 1).padStart(2, '0')
        const day = String(today.getDate()).padStart(2, '0')
        this.selectedDate = `${year}-${month}-${day}`

        // 重置"只看重要"筛选为默认状态（false）
        this.onlyImportant = false

        // 重新初始化日期列表
        this.initDates()

        // 切换tab时重新加载数据
        this.currentLoadedTab = ''
        this.currentLoadedDate = ''
        this.allCalendarData = []
        this.isCalendarFirstLoad = true

        // 滚动到当前日期
        this.$nextTick(() => {
          setTimeout(() => {
            this.scrollToSelectedDate()
          }, 100)
        })

        // 重新加载数据
        if (this.$refs.paging) {
          this.$refs.paging.reload()
        }
      },

      /**
       * 更新Tab下划线位置
       */
      updateTabIndicator() {
        const sys = uni.getSystemInfoSync()
        const screenWidth = sys.screenWidth
        const tabWidth = screenWidth / 3 // 3个Tab平分屏幕宽度
        const indicatorWidth = 60 // 下划线宽度（rpx转px）

        let tabIndex = 0
        if (this.activeTab === 'calendar') {
          tabIndex = 0
        } else if (this.activeTab === 'events') {
          tabIndex = 1
        } else if (this.activeTab === 'central') {
          tabIndex = 2
        }

        // 计算下划线的left位置（居中对齐）
        // 下划线宽度按照750rpx设计稿，60rpx = 60 / 750 * screenWidth
        const indicatorWidthPx = (60 / 750) * screenWidth
        this.tabIndicatorLeft = tabIndex * tabWidth + (tabWidth - indicatorWidthPx) / 2
      },
      
      /**
       * 初始化日期列表（生成前后各30天，共61天）
       */
      initDates() {
        const today = new Date()
        const days = []
        const weekTexts = ['日', '一', '二', '三', '四', '五', '六']
        
        // 生成前后各30天
        for (let i = -30; i <= 30; i++) {
          const date = new Date(today)
          date.setDate(date.getDate() + i)
          
          const year = date.getFullYear()
          const month = String(date.getMonth() + 1).padStart(2, '0')
          const day = String(date.getDate()).padStart(2, '0')
          const dateStr = `${year}-${month}-${day}`
          const weekDay = date.getDay()
          
          days.push({
            date: dateStr,
            day: date.getDate(),
            month: date.getMonth() + 1,
            year: date.getFullYear(),
            weekDay: weekDay,
            weekText: weekTexts[weekDay],
          })
        }
        
        this.visibleDays = days
        
        // 滚动到选中的日期
        this.$nextTick(() => {
          this.scrollToSelectedDate()
        })
      },
  
      /**
       * 滚动到选中的日期（居中显示）
       */
      scrollToSelectedDate() {
        const index = this.visibleDays.findIndex(d => d.date === this.selectedDate)
        if (index !== -1) {
          this.scrollIntoDayId = `day-${index}`
        }
      },
  
      /**
       * 选择日期
       */
      selectDate(dayItem) {
        // 更新选中的日期
        this.selectedDate = dayItem.date
        
        // 滚动到选中的日期居中
        this.$nextTick(() => {
          this.scrollToSelectedDate()
        })
        
        // 重新加载该日期的数据
        this.reloadDataForDate(dayItem.date)
        
        uni.showToast({
          title: `已选择 ${dayItem.month}月${dayItem.day}日`,
          icon: 'none',
          duration: 1500,
        })
      },
  
      /**
       * 打开日历选择器
       */
      openCalendar() {
        this.$nextTick(() => {
          if (this.$refs.calendar) {
            this.$refs.calendar.open()
          }
        })
      },
  
      /**
       * 日历选择器确认
       */
      onCalendarConfirm(e) {
        if (e && e.fulldate) {
          this.selectedDate = e.fulldate
          
          // 检查选中的日期是否在当前列表中
          const dateExists = this.visibleDays.some(d => d.date === e.fulldate)
          
          if (!dateExists) {
            // 重新生成列表
            const selectedDateObj = new Date(e.fulldate)
            const days = []
            const weekTexts = ['日', '一', '二', '三', '四', '五', '六']
            
            for (let i = -30; i <= 30; i++) {
              const date = new Date(selectedDateObj)
              date.setDate(date.getDate() + i)
              
              const year = date.getFullYear()
              const month = String(date.getMonth() + 1).padStart(2, '0')
              const day = String(date.getDate()).padStart(2, '0')
              const dateStr = `${year}-${month}-${day}`
              const weekDay = date.getDay()
              
              days.push({
                date: dateStr,
                day: date.getDate(),
                month: date.getMonth() + 1,
                year: date.getFullYear(),
                weekDay: weekDay,
                weekText: weekTexts[weekDay],
              })
            }
            
            this.visibleDays = days
          }
          
          // 滚动到选中的日期
          this.$nextTick(() => {
            this.scrollToSelectedDate()
          })
          
          // 重新加载数据
          this.reloadDataForDate(this.selectedDate)
          
          uni.showToast({
            title: `已选择 ${e.month}月${e.date}日`,
            icon: 'none',
            duration: 1500,
          })
        }
      },
  
      /**
       * 日历选择器改变
       */
      onCalendarChange(e) {
        console.log('日历改变:', e)
      },
  
      /**
       * 重新加载指定日期的数据
       */
      reloadDataForDate(date) {
        // 如果切换到不同的日期，需要重新获取数据
        if (this.currentLoadedDate !== date) {
          // 重新加载z-paging数据
          if (this.$refs.paging) {
            this.$refs.paging.reload()
          }
        }
      },
  
      /**
       * 切换只看重要筛选
       */
      toggleImportantFilter() {
        const previousState = this.onlyImportant
        this.onlyImportant = !this.onlyImportant
        
        // 如果是从"只看重要"切换到"显示全部"（取消只看重要），需要重新从接口拉取数据
        if (previousState === true && this.onlyImportant === false) {
          // 清空缓存并标记为首次加载，确保重新获取所有数据
          this.allCalendarData = []
          this.isCalendarFirstLoad = true
          
          // 重新加载数据
          if (this.$refs.paging) {
            this.$refs.paging.reload()
          }
        }
        // 如果是从"显示全部"切换到"只看重要"，使用 v-show 控制显示即可，无需重新加载数据
      },
  
      /**
       * z-paging 查询数据方法
       */
      async queryList(pageNo, pageSize) {
        try {
          console.log('请求数据:', {
            activeTab: this.activeTab,
            selectedDate: this.selectedDate,
            pageNo,
            pageSize
          })
  
          // 检查日期或tab是否改变
          const dateChanged = this.currentLoadedDate !== this.selectedDate
          const tabChanged = this.currentLoadedTab !== this.activeTab
          const needReload = dateChanged || tabChanged
  
          // 下拉刷新时清空缓存（如果日期或tab没有改变）
          if (pageNo === 1 && !this.isCalendarFirstLoad && !needReload) {
            this.allCalendarData = []
            this.isCalendarFirstLoad = true
          }
  
          // 如果是首次加载、切换了日期或切换了tab，获取该日期的所有数据
          if (this.isCalendarFirstLoad || needReload) {
            // 显示加载动画
            this.isCalendarLoading = true
            
            // 计算选中日期的开始和结束时间戳
            const selectedDateObj = new Date(this.selectedDate)
            const start_time = new Date(selectedDateObj.setHours(0, 0, 0, 0)).getTime()
            const end_time = new Date(selectedDateObj.setHours(23, 59, 59, 999)).getTime()
  
            // 构建请求参数
            const requestParams = {
              start_time,
              end_time
            }
            console.log('requestParams', requestParams)
  
            let response
            let rawData = []
  
            // 根据不同的tab调用不同的API
            if (this.activeTab === 'calendar') {
              // 财经日历
              response = await getEconomicData(requestParams)
              rawData = response.data || []
              
              // 映射数据格式（数据已统一格式化为驼峰格式）
              this.allCalendarData = rawData.map((item, index) => {
                const publishDate = new Date(item.publishTimestamp)
                const hours = String(publishDate.getHours()).padStart(2, '0')
                const minutes = String(publishDate.getMinutes()).padStart(2, '0')
                const timeStr = `${hours}:${minutes}`
                
                const uniqueId = `${item.countryCode}-${item.publishTimestamp}-${index}`
                
                return {
                  id: uniqueId,
                  time: timeStr,
                  title: item.calendarName,
                  prev: item.previousValue || '--',
                  exp: item.forecastValue || '--',
                  actual: item.publishedValue || '--',
                  status: item.publishedValue ? '已公布' : (item.hasExactPublishTime === 1 ? '未公布' : ''),
                  flag: item.flag || this.getCountryFlag(item.countryCode),
                  importance: item.importanceLevel || 1,
                  hasExactTime: item.hasExactPublishTime === 1,
                  effect: item.dataEffect || '',
                  publishTimestamp: item.publishTimestamp // 保存时间戳用于排序
                }
              })
            } else if (this.activeTab === 'events') {
              // 财经事件
              response = await getFinancialEvents(requestParams)
              rawData = response.data || []
              
              // 映射数据格式（数据已统一格式化为驼峰格式）
              this.allCalendarData = rawData.map((item, index) => {
                const publishDate = new Date(item.publishTimestamp)
                const hours = String(publishDate.getHours()).padStart(2, '0')
                const minutes = String(publishDate.getMinutes()).padStart(2, '0')
                const timeStr = `${hours}:${minutes}`
                
                const uniqueId = `events-${item.countryCode}-${item.publishTimestamp}-${index}`
                
                return {
                  id: uniqueId,
                  time: timeStr,
                  title: item.calendarName,
                  flag: item.flag || this.getCountryFlag(item.countryCode),
                  importance: item.importanceLevel || 1,
                  hasExactTime: item.hasExactPublishTime === 1,
                  publishTimestamp: item.publishTimestamp // 保存时间戳用于排序
                }
              })
            } else if (this.activeTab === 'central') {
              // 央行动态
              response = await getCentralBankActivities(requestParams)
              rawData = response.data || []
              
              // 映射数据格式（数据已统一格式化为驼峰格式）
              this.allCalendarData = rawData.map((item, index) => {
                const publishDate = new Date(item.publishTimestamp)
                const hours = String(publishDate.getHours()).padStart(2, '0')
                const minutes = String(publishDate.getMinutes()).padStart(2, '0')
                const timeStr = `${hours}:${minutes}`
                
                const uniqueId = `central-${item.countryCode}-${item.publishTimestamp}-${index}`
                
                return {
                  id: uniqueId,
                  time: timeStr,
                  title: item.calendarName,
                  flag: item.flag || this.getCountryFlag(item.countryCode),
                  importance: item.importanceLevel || 1,
                  hasExactTime: item.hasExactPublishTime === 1,
                  publishTimestamp: item.publishTimestamp // 保存时间戳用于排序
                }
              })
            }
  
            console.log('数据响应:', response)
            console.log('处理后的数据:', this.allCalendarData.length, '条')
  
            // 按时间戳倒序排序（最新的在最顶部）
          //   this.allCalendarData.sort((a, b) => {
          //     const timestampA = a.publishTimestamp || 0
          //     const timestampB = b.publishTimestamp || 0
          //     return timestampB - timestampA // 倒序
          //   })
  
            console.log('缓存的所有数据:', this.allCalendarData.length, '条')
            
            // 更新当前加载的日期和tab
            this.currentLoadedDate = this.selectedDate
            this.currentLoadedTab = this.activeTab
            this.isCalendarFirstLoad = false
            this.isCalendarLoading = false
          }
  
          // 本地分页
          const startIndex = (pageNo - 1) * pageSize
          const endIndex = startIndex + pageSize
          const pageData = this.allCalendarData.slice(startIndex, endIndex)
  
          // 完成加载
          this.$refs.paging.complete(pageData)
        } catch (error) {
          console.error('加载数据失败:', error)
          this.isCalendarLoading = false
          this.$refs.paging.complete(false)
          
          uni.showToast({
            title: error.message || '加载失败，请重试',
            icon: 'none',
            duration: 2000,
          })
        }
      },
  
      /**
       * 获取国家旗帜emoji
       */
      getCountryFlag(countryCode) {
        const flagMap = {
          'USA': '🇺🇸',
          'EUR': '🇪🇺',
          'GBR': '🇬🇧',
          'GBP': '🇬🇧',
          'JPY': '🇯🇵',
          'CHF': '🇨🇭',
          'AUD': '🇦🇺',
          'CAD': '🇨🇦',
          'CNY': '🇨🇳',
          'CHN': '🇨🇳',
        }
        return flagMap[countryCode] || ''
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .financial-calendar-page {
    width: 100%;
    min-height: 100vh;
    background: #f5f7fa;
  }
  
  /* 顶部容器 */
  .top-container {
    background: #ffffff;
  }
  
  /* 导航栏 */
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 24rpx;
    background: #ffffff;
  }
  
  .nav-left {
    display: flex;
    align-items: center;
    gap: 8rpx;
    cursor: pointer;
    
    &:active {
      opacity: 0.6;
    }
  }
  
  .nav-title {
    flex: 1;
    font-size: 34rpx;
    font-weight: 700;
    color: #2a2b2f;
    text-align: center;
  }
  
  .nav-right {
    width: 40rpx;
  }
  
  /* Tab切换容器 */
  .tab-container {
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
  }

  .tab-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 24rpx;
  }

  .tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26rpx 0;
    position: relative;
    cursor: pointer;
    z-index: 1;

    &:active {
      .tab-text {
        transform: scale(0.96);
      }
    }

    &.active {
      .tab-text {
        color: #00d4aa;
        font-weight: 600;
      }
    }
  }

  .tab-text {
    font-size: 30rpx;
    color: #909399;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                font-weight 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
  }

  /* 滑动下划线 */
  .tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60rpx;
    height: 4rpx;
    background: linear-gradient(90deg, #00d4aa 0%, #00a88a 100%);
    border-radius: 2rpx;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
  }
  
  /* 日历头部 */
  .calendar-header {
    background: #ffffff;
    padding: 24rpx 0;
    border-bottom: 1px solid #f0f0f0;
  }
  
  /* 第一行：日期输入框 + 只看重要 */
  .calendar-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx 20rpx;
    gap: 16rpx;
  }
  
  .date-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 12rpx 20rpx;
    background: #f5f7fa;
    border-radius: 12rpx;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:active {
      opacity: 0.7;
      transform: scale(0.98);
    }
  }
  
  .date-input {
    font-size: 28rpx;
    font-weight: 500;
    color: #303133;
  }
  
  .important-filter {
    display: flex;
    align-items: center;
    gap: 8rpx;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:active {
      opacity: 0.7;
    }
  }
  
  .checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .custom-checkbox {
    width: 36rpx;
    height: 36rpx;
    border: 2rpx solid #dcdfe6;
    border-radius: 6rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    
    &.checked {
      background: #00d4aa;
      border-color: #00d4aa;
    }
  }
  
  .filter-text {
    font-size: 26rpx;
    color: #303133;
    user-select: none;
  }
  
  .calendar-dates-container {
    display: flex;
    align-items: center;
    gap: 16rpx;
    padding: 0 24rpx;
  }
  
  .dates-content {
    flex: 1;
    min-width: 0;
  }
  
  .calendar-scroll {
    width: 100%;
    white-space: nowrap;
  }
  
  .calendar-content {
    display: inline-flex;
    gap: 20rpx;
    padding: 8rpx 0;
  }
  
  .day-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80rpx;
    padding: 16rpx 20rpx;
    border-radius: 16rpx;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &.active {
      background: linear-gradient(135deg, #00d4aa 0%, #00a88a 100%);
      box-shadow: 0 4rpx 12rpx rgba(0, 212, 170, 0.3);
      
      .week-text,
      .day-text {
        color: #ffffff;
      }
    }
    
    &:active {
      transform: scale(0.95);
    }
  }
  
  .week-text {
    font-size: 22rpx;
    color: #909399;
    margin-bottom: 8rpx;
  }
  
  .day-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #303133;
  }
  
  .calendar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    padding: 8rpx 16rpx;
    cursor: pointer;
    
    &:active {
      opacity: 0.6;
    }
  }
  
  .gray-line {
    width: 2rpx;
    height: 24rpx;
    background: #c0c0c0;
  }
  
  /* 加载和空状态 */
  .calendar-loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 120rpx 0;
    gap: 20rpx;
  }
  
  .loading-text {
    font-size: 28rpx;
    color: #00d4aa;
    font-weight: 500;
  }
  
  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120rpx 0;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #c0c4cc;
  }
  
  /* 财经事件列表 */
  .calendar-list {
    padding: 24rpx;
  }
  
  .up-item {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    }
  }
  
  .up-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;
  }
  
  .up-left {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }
  
  .flag {
    width: 32rpx;
    height: 32rpx;
    flex-shrink: 0;
  }
  
  .time {
    font-size: 28rpx;
    font-weight: 600;
    color: #00d4aa;
  }
  
  .icon {
    width: 32rpx;
    height: 32rpx;
  }
  
  .notice-icon {
    width: 28rpx;
    height: 28rpx;
  }
  
  .gray {
    font-size: 24rpx;
    color: #909399;
  }
  
  .up-right {
    display: flex;
    align-items: center;
  }
  
  .stars {
    display: flex;
    gap: 4rpx;
  }
  
  .star {
    font-size: 28rpx;
    color: #dcdfe6;
    
    &.filled {
      color: #ffa500;
    }
  }
  
  .up-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;
    gap: 16rpx;
  }
  
  .event-title {
    flex: 1;
    font-size: 30rpx;
    font-weight: 600;
    color: #303133;
    
    &.event-published {
      color: #606266;
    }
  }
  
  .status-badge {
    flex-shrink: 0;
    padding: 4rpx 16rpx;
    font-size: 22rpx;
    color: #909399;
    background: #f5f7fa;
    border-radius: 8rpx;
    
    &.status-published {
      color: #00d4aa;
      background: rgba(0, 212, 170, 0.1);
    }
  }
  
  .up-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16rpx;
  }
  
  .meta-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
  }
  
  .meta-label {
    font-size: 22rpx;
    color: #909399;
  }
  
  .meta-value {
    font-size: 26rpx;
    font-weight: 600;
    color: #606266;
    
    &.has-value {
      color: #00d4aa;
    }
  }
  </style>
  
  
  